<template>
    <div class="fc-header">
        <div class="fc-wuserheader">
            <!--店铺信息-->
            <span class="iconfont icon-arrows_left" @click="$emit('toBack')"></span>
            <img v-if="productionHeader.photo" @click="toUserInfo(productionHeader.userId)" class="fc-userheader" :src="productionHeader.photo" alt="">
            <span class="fc-userheader-des">
                <span>{{productionHeader.userName}}</span>
                <span class="star-light-wrap displayBlock">
                    <span class="star-wlight" v-for="value in 5">
                        <img class="star-light" v-if="true" src="../../../assets/images/store/star_light.png" alt="">
                        <img class="star-light" v-else src="../../../assets/images/store/star_gray.png" alt="">
                    </span>
                </span>
            </span>
            <span class="fc-attention" v-if="!productionHeader.hadConcernedUser" @click="$emit('doAttention',productionHeader.concernType)">
                <img class="add-attention-icon" src="../../../assets/images/common/icon_white_add.png" alt="">
                关注
            </span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "userInfoHeader",
        props:{
            productionHeaderProp:{
                type:Object
            }
        },
        data(){
            return{
                productionHeader:{
                    userId:0,
                    photo:'',
                    userName:'',
                    concernType:0,
                    hadConcernedUser:false,
                }
            }
        },
        mounted(){
            this.productionHeader = Object.assign({},this.productionHeader,this.productionHeaderProp)
        },
        watch:{
            productionHeaderProp(val){
                this.productionHeader = Object.assign({},this.productionHeader,val);
            }
        }
    }
</script>

<style scoped>
    .fc-header {
        color: #000;
        padding: .1rem 0 ;
        width: 100%;
        z-index: 2;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
    }
    .fc-wuserheader {
        height: .32rem;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        color: #fff;
    }
    .fc-userheader {
        width: .32rem;
        height: .32rem;
        border-radius: 50%;
        background: #fff;
        margin-right: .1rem;
    }
    .fc-userheader-des {
        font-size: .12rem;
        color: #fff;
    }
    .icon-arrows_left{
        font-size: .3rem;
        margin-left: .04rem;
    }
    .star-light{
        width: .08rem;
    }
    .star-light-wrap{
        padding-left: .05rem;
    }
    .star-wlight{
        padding-right: .04rem;
    }
    .add-attention-icon {
        width: .1rem;
    }
    .add-attention-box{

    }
    .fc-attention {
        margin-left: 10px;
        display: inline-block;
        height: .2rem;
        background-color: #FF3333;
        -webkit-border-radius: .05rem;
        -moz-border-radius: .05rem;
        border-radius: .05rem;
        text-align: center;
        line-height: .2rem;
        color: #fff;
        font-size: .12rem;
        padding: 0 .05rem;
    }
</style>